<template>
    <van-uploader :max-count="limit" v-model="imgList" :after-read="afterRead" @delete="afterDelete" />
</template>



<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import myApi from "@/api/myApi";
@Component({
    name: "tpl",
    components: {},
})
export default class extends Vue {
    @Prop({ default: 999 }) limit!: boolean;
    @Prop({ default: [] }) defImgList!: string[];
    imgList: any = [];
    validDefImgList() {
        console.info(this.defImgList);
        if (this.defImgList.length > 0 && !this.defImgList.every((item) => item)) {
            return;
        }
        if (this.defImgList) {
            this.imgList = this.defImgList.map((item, idx) => {
                return {
                    url: item,
                    status: null,
                };
            });
        }
    }
    mounted() {
        this.validDefImgList();
    }

    async afterRead(files: any, detail: any) {
        files.forEach(async (item: any) => {
            if (item.status === "loading") {
                const file = item?.file;
                if (file) {
                    let formData = new FormData();
                    formData.append("file", file);
                    try {
                        const res = await myApi.uploadImage(formData);
                        item.url = res.msg;
                    } finally {
                        item.status = null;
                        this.$emit("change", this.imgList);
                    }
                }
            }
        });
    }
    afterDelete() {
        this.$emit("change", this.imgList);
    }
}
</script>

<style>
</style>